<!--  Summary: 此处为部门信息创建 编辑组件 -->
<template>
  <div class="wrap-manager" v-loading.lock="loading">
    <div class="diviling_line option">
      <div class="diviling_block">
        <div class="block_icon">
          <div class="icon"></div>
        </div>
        <div class="label">基础信息</div>
      </div>
    </div>

    <div class="base_content">
      <el-form :model="organizationEditModel" :rules="rules" :inline="true" ref="userForm" class="demo-form-inline"
        label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="organizationEditModel.name" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="name">
          <el-input v-model="organizationEditModel.code" placeholder="请输入部门编码"></el-input>
        </el-form-item>
        <el-form-item label="父级部门" prop="parentKey">
          <el-select v-model="organizationEditModel.parentKey" clearable filterable>
            <el-option v-for="item in organizationList" :key="item.organizationPrimaryKey" :label="item.name"
              :value="item.organizationPrimaryKey" :disabled="item.isDisable"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="部门级别" prop="level">
          <el-input v-model="organizationEditModel.level" placeholder="请输入部门级别"></el-input>
        </el-form-item>
        <el-form-item label="部门层级路径" prop="path">
          <el-input v-model="organizationEditModel.path" placeholder="请输入部门层级路径"></el-input>
        </el-form-item>
        <el-form-item label="显示序号" prop="path">
          <el-input v-model="organizationEditModel.sort" placeholder="请输入序号"></el-input>
        </el-form-item>
        <el-form-item label="是否共享">
          <el-select v-model="organizationEditModel.isShare" clearable filterable>
            <el-option v-for="item in isShareList" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否删除">
          <el-select v-model="organizationEditModel.isDeleted" clearable filterable>
            <el-option v-for="item in isDeletedList" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="部门主管" prop="leaderEmployeeKey">
          <el-select v-model="organizationEditModel.leaderEmployeeKey" clearable filterable>
            <el-option v-for="item in userList" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="option_list">
      <div class="option_content">
        <el-button @click="submit" type="primary" plain>保存</el-button>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.wrap-manager {
  text-align: left;
  padding: 5px 20px;

  .base_content {
    //background-color: #ededed;
    margin: 10px auto;
    padding: 10px 10px;
    font-size: 0.9rem;
    line-height: 2rem;
  }

  .content {
    margin: 10px auto;
  }
}
</style>

<script>
import {
  ElMessage
} from 'element-plus'
import { getUserList } from '@/api/user.js';
import { addOrganization, updateOrganization, getOrganizationList } from '@/api/organization.js'
let isEmpty = (value) => {
  if (value == null || value == '' || value == undefined || value.length == 0) {
    return true;
  }
  return false;
}
export default {
  components: {},
  props: {
    organization: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      organizationEditModel: {},
      initOraName: '',
      organizationList: [],
      isShareList: [
        { id: 0, value: '否' },
        { id: 1, value: '共享' }
      ],
      isDeletedList: [
        { id: 0, value: '否' },
        { id: 1, value: '删除' }
      ],
      userList: [],
      rules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入部门编码", trigger: "blur" }],
        parentKey:  [{ required: true, message: "请选择父级部门", trigger: "blur" }],
        leaderEmployeeKey: [{ required: true, message: "请选择部门主管", trigger: "blur" }]
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    submit() {
      this.$refs.userForm.validate(async (valid) => {
        if (valid) {
          this.organizationEditModel.leaderEmployeeName = this.userList.find(item=>item.id == this.organizationEditModel.leaderEmployeeKey).value
          if (!isEmpty(this.organizationEditModel.organizationPrimaryKey)) {
            this.updateOrganization();
          } else {
            this.addOrganization();
          }
        }
      });
    },
    async addOrganization() {
      this.loading = true
      let res = await addOrganization(this.organizationEditModel)
      let resp = res.data
      if (resp && resp.success) {
        ElMessage.success("添加部门成功！");
        this.loading = false;
        this.saveSuccess();
      } else {
        ElMessage.error(`添加部门失败，错误：${resp.message}`)
        this.loading = false;
      }
    },
    async updateOrganization() {
      this.loading = true
      let res = await updateOrganization(this.organizationEditModel)
      let resp = res.data
      if (resp && resp.success) {
        ElMessage.success("更新部门成功！");
        this.loading = false
        this.saveSuccess();
      } else {
        this.loading = false
        ElMessage.error(`更新部门失败，错误：${resp.message}`)
      }
    },
    async getOrganizationList() {
      this.loading = true
      let res = await getOrganizationList(null)
      this.loading = false;
      let resp = res.data
      if (resp && resp.success) {
        this.organizationList = resp.rows
        this.organizationList.forEach(i => {
          i.isDisable = i.name == this.initOraName
        })
      } else {
        this.organizationList = []
      }
    },
    saveSuccess() {
      this.$emit('closeDrawer')
    }
  },
  created() {
    this.organizationEditModel = this.organization
    this.initOraName = this.organizationEditModel.name
    this.getOrganizationList()
    getUserList({ currentPage: 1, pageSize: 9999 }).then(res => {
      if(res.data.success){
        this.userList = res.data.rows.map(item =>{
          return {
            id: item.userPrimaryKey,
            value: item.name
          }
        })
      }
    })
  },
  mounted() {

  },
}
</script>